@import "color";
%boxSizing{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}
@mixin borderRadius($radius){
  border-radius : $radius;
  -webkit-border-radius : $radius;
  -moz-border-radius : $radius;
}
.carousel-box{
  .slick-initialized {
    position: relative;
    @extend %boxSizing;
    //height :  186px;
    overflow: hidden;
    .slick-track {
      width: 100%;
      //height :  186px;
      @extend %boxSizing;
      .slick-slide {
        position: relative;
        width: 100%;
        //height :  186px;
        float: left;
        @extend %boxSizing;
        overflow: hidden;
        img {
          width: 100%;
          overflow: hidden;
        }
      }
    }
  }


  //dots
  .slick-dots{
    position: absolute;
    bottom : 5px;
    text-align: center;
    width: 100%;
    margin-left: 0;
    font-size: 1rem;
    line-height: 1.6;
    li{
      position: relative;
      display: inline-block;
      height: 8px;
      width: 8px;
      margin: 0 3px;
      padding: 0;
      cursor: pointer;
      button{
        border: 0;
        background: 0 0;
        display: block;
        height: 8px;
        width: 8px;
        outline: 0;
        line-height: 0;
        font-size: 0;
        color: transparent;
        padding: 4px;
        cursor: pointer;
        -webkit-appearance: button;
        text-transform: none;
        border: 1px solid $mafu-darken-blue;
        @include borderRadius(10px);
        &:before{
          position: absolute;
          top: 0;
          left: 0;
          content: '·';
          height: 8px;
          line-height: 8px;
          width: 8px;
          font-size: 6px;
          text-align: center;
        }
      }
      &.slick-active{
        button{
          background-color: $mafu-darken-blue;
        }
      }
    }
  }
}